<template>
  <view>
    <movable-area class="movable-area">
      <movable-view :x="x" direction="horizontal" @change="movableChange" />
    </movable-area>
  </view>
</template>

<script>
export default {
  data() {
    return {
      x: 290
    }
  },
  methods: {
    
    // 浮动框拖动
    movableChange(e) {
      this.x = e.detail.x
    }
  }
}
</script>

<style scoped>
	.movable-area{
		width: 80%;
		position: fixed;
		bottom: 0;
		right: 0;
	}
</style>
